<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 系统设置
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="formData" label-width="140px">
				<el-form-item label="站点名称" prop="title">
				    <el-input v-model="formData.title" placeholder="请输入站点名称"></el-input>
				</el-form-item>
				<el-form-item label="站点简介" prop="title">
				    <el-input v-model="formData.desc" placeholder="请输入站点简介"></el-input>
				</el-form-item>
				<el-form-item label="首页跑马灯" prop="title">
				    <el-input v-model="formData.indexText" placeholder="请输入首页跑马灯文字"></el-input>
				</el-form-item>
				<el-form-item label="社保缴费二维码" prop="title">
				    <vUpload ref="vFeeIcon1" :file="formData.feeIcon1" @imageUrl="editfeeIcon"></vUpload>
				</el-form-item>
				<el-form-item label="卫生费缴费二维码" prop="title">
				    <vUpload ref="vFeeIcon2" :file="formData.feeIcon2" @imageUrl="editfeeIcon2"></vUpload>
				</el-form-item>
				<el-form-item label="卫生费人均" prop="title">
				    <el-input v-model="formData.perCapita" placeholder="请输入卫生费人均多少钱"></el-input>
				</el-form-item>
				<el-form-item label="卫生费最低" prop="title">
				    <el-input v-model="formData.lowest" placeholder="请输入卫生费最低多少钱"></el-input>
				</el-form-item>
<!--                <el-form-item label="合同协议" prop="agreement">
                    <quill-editor ref="myTextEditor" v-model="formData.agreement" :options="editorOption"></quill-editor>
                </el-form-item> -->
            	<el-form-item>
            		<el-button type="primary" @click="formSubmit">确 定</el-button>
            	</el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
import vUpload from '../common/Upload.vue';
export default {
    name: 'Abouts',
	components: {
		quillEditor,
		vUpload,
	},
    data() {
        return {
			formData: {

			},
			editorOption: {
				placeholder: '请输入内容'
			},
        }
    },
    created() {
		this.getData()
    },
    methods: { 
		imageUrl (file) {
			this.formData.icon = file
		},
		editfeeIcon (file) {
			this.formData.feeIcon1 = file
		},
		editfeeIcon2 (file) {
			console.log(file)
			this.formData.feeIcon2 = file
		},
		onEditorChange({ editor, html, text }) {
			this.formData.agreement = html;
		},
		getData () {
			this.$apiPost('Config/infos').then(res => {
				if(res.code == 1) {
					// this.formData.icon = res.data.icon
					this.formData = res.data
					// this.$refs.vUpload.tempFile = res.data.icon
					this.$refs.vFeeIcon1.tempFile = res.data.feeIcon1
					this.$refs.vFeeIcon2.tempFile = res.data.feeIcon2
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		formSubmit () {
			this.$apiPost('Config/editData', this.formData).then(res => {
				if(res.code == 1) {
					this.$message(res.msg)
				} else {
					this.$message(res.msg)
				}
			})
		}
    }
};
</script>
<style scoped>
.goNew{
	color: #2e6bd9;
	cursor: pointer;
}
.handle-box {
    margin-bottom: 20px;
}
.handle-select {
    width: 120px;
}
.handle-input {
    width: 200px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr5{
	margin-right: 1px;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
